<!--
 * @Description: 网元监控
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:10:09
 * @LastEditTime: 2021-09-29 18:08:28
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="task console">
    <count-card />
    <div class="page-content">
      <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
        <div slot="top">
          <el-form :model="filterSearch" label-width="80px">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="网元名称">
                  <el-input v-model.trim="filterSearch.keyword" placeholder="请输入名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="设备状态">
                  <el-select
                    v-model="filterSearch.connectionState"
                    style="width:100%;"
                    placeholder="请选择状态"
                    v-adaption
                  >
                    <el-option label="链接" value="CONNECTED"></el-option>
                    <el-option label="断链" value="DISCONNECTED"></el-option>
                    <el-option label="未知" value="UNKNOWN"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="是否关联">
                  <el-select
                    v-model="filterSearch.isRealted"
                    style="width:100%;"
                    placeholder="请选择关联状态"
                    v-adaption
                  >
                    <el-option label="已关联" value="0"></el-option>
                    <el-option label="未关联" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="软件SN">
                  <el-input v-model.trim="filterSearch.sn" placeholder="请输入软件SN"></el-input>
                </el-form-item>
              </el-col>
              <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
              </el-row>
            </el-row>
          </el-form>
        </div>
      </table-bar>

      <tao-table
        :data="dataList"
        :page="page"
        @changePage="changePage"
        :showPage="true"
        ref="table"
      >
        <el-table-column label="ID" align="center" width="100" prop="id" v-if="columns[0].show" />
        <el-table-column
          label="名称"
          min-width="200"
          show-overflow-tooltip
          prop="userlabel"
          v-if="columns[1].show"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.extAttrs.siteId === undefined">{{scope.row.userlabel}}</template>
            <template v-else>
              <span
                v-if="scope.row.extAttrs.siteId > -1"
                @click="neInfo(scope.row)"
                class="ne-title"
              >{{scope.row.userlabel}}</span>
              <span v-else>{{scope.row.userlabel}}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          width="100"
          sortable
          show-overflow-tooltip
          prop="typeLabel"
          v-if="columns[2].show"
        />
        <el-table-column
          label="型号"
          align="center"
          width="100"
          sortable
          show-overflow-tooltip
          prop="subType"
          v-if="columns[3].show"
        >
          <template slot-scope="scope">{{scope.row.subType | filterType }}</template>
        </el-table-column>
        <el-table-column
          label="租户"
          align="center"
          width="100"
          show-overflow-tooltip
          prop="extAttrs.dgName"
          v-if="columns[4].show"
        />
        <el-table-column label="软件SN" align="center" width="180" prop="esn" v-if="columns[5].show">
          <template slot-scope="scope">{{scope.row.extAttrs.esn | filterSN}}</template>
        </el-table-column>
        <el-table-column label="MAC地址" align="center" width="180" prop="mac" v-if="columns[6].show">
          <template slot-scope="scope">{{scope.row.extAttrs.allMac}}</template>
        </el-table-column>
        <el-table-column
          label="IP"
          align="center"
          width="180"
          prop="ipAddress"
          v-if="columns[7].show"
        />
        <el-table-column
          label="状态"
          align="center"
          width="100"
          prop="operResult"
          v-if="columns[8].show"
        >
          <template slot-scope="scope">
            <div v-show="scope.row.managementState === 'ONLINE'">
              <span v-if="scope.row.connectionState === 'CONNECTED'">
                <i class="i-success"></i>
                链接
              </span>
              <span v-if="scope.row.connectionState === 'DISCONNECTED'">
                <i class="i-error"></i>
                断链
              </span>
            </div>
            <span v-show="scope.row.connectionState === 'UNKNOWN'">
              <i class="i-warning"></i>
              未知
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="关联站点"
          align="center"
          width="110"
          prop="siteId"
          v-if="columns[9].show"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.extAttrs.siteId === undefined">
              <el-tag size="medium" type="danger">未关联</el-tag>
            </template>
            <template v-else>
              <el-tag v-if="scope.row.extAttrs.siteId > -1" size="medium" type="success">已关联</el-tag>
              <el-tag v-else size="medium" type="danger">未关联</el-tag>
            </template>
          </template>
        </el-table-column>
      </tao-table>
    </div>
  </div>
</template>

<script>
import CountCard from '@/components/Views/CountCard';
export default {
  components: {
    CountCard
  },
  data () {
    return {
      dataList: [],
      filterSearch: {
        keyword: '',
        connectionState: '',
        isRealted: '',
        sn: ''
      },
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      columns: [
        { name: 'ID', show: true },
        { name: '名称', show: true },
        { name: '类型', show: true },
        { name: '型号', show: true },
        { name: '租户', show: true },
        { name: '软件SN', show: true },
        { name: 'MAC地址', show: true },
        { name: 'IP', show: true },
        { name: '状态', show: true },
        { name: '关联站点', show: true }
      ]
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  // 过滤显示
  filters: {
    filterType (val) {
      val = val.replace('_', ' ');
      return val;
    }
  },
  methods: {
    // 网元ID
    neInfo (row) {
      if (row.connectionState === 'CONNECTED' && row.managementState === 'ONLINE') {
        localStorage.setItem('monitor', row.id);
        // 根据ID查询网元相关信息
        this.$router.push({
          path: `/monitor/device-info`,
          query: {
            id: row.id
          }
        });
      } else {
        this.$message.error('网元状态异常！');
      }
    },
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        keyword: '',
        connectionState: '',
        isRealted: '',
        sn: ''
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        keyword: _this.filterSearch.keyword,
        connectionState: _this.filterSearch.connectionState,
        isRealted: _this.filterSearch.isRealted,
        sn: _this.filterSearch.sn,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/ne/queryNEWithSite',
        data: params
      }).then(res => {
        if (res.status === '0') {
          let { count, objects } = res.resultBody;
          _this.page.total = count;
          _this.dataList = objects;
        }
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
  }
};
</script>

<style lang="scss" scoped>
.console {
  height: 100%;

  &::-webkit-scrollbar {
    width: 0px !important;
  }

  ::v-deep .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    z-index: 999;

    .line-title {
      padding: 0 13px;
      display: flex;
      align-items: center;

      i {
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 50%;
        color: #1890ff;
        background-color: rgb(230, 247, 255);
        font-size: 15px;
      }

      span {
        color: #555;
        font-size: 15px;
        margin-left: 10px;
      }
    }
  }

  .row {
    display: flex;
    margin-top: 15px;
    background: transparent !important;

    > div {
      margin-right: 15px;
      overflow: hidden;
      background: #fff;
      border-radius: 3px;
      transition: box-shadow 0.3s;

      &:last-of-type {
        margin-right: 0 !important;
      }
    }
  }
}
.page-content {
  width: 100%;
  height: 100%;
  margin-top: 15px;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.i-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e8eaec;
  position: relative;
  top: 1px;
}
.i-success {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #19be6b;
  position: relative;
  top: 1px;
}
.i-error {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ed4014;
  position: relative;
  top: 1px;
}
.i-warning {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f90;
  position: relative;
  top: 1px;
}
.ne-title {
  cursor: pointer;
  color: #3296fa !important;
  &:hover {
    text-decoration: underline;
  }
}
</style>